<template>
    <div class="search-panel">
      <div class="search-bar">
        <input type="text" placeholder="搜索" v-model="searchKeyword" class="search-input">
        <button class="cancel-btn" @click="goBack">取消</button>
      </div>
      <div class="filter-section">
        <div class="filter-title">影片</div>
        <div class="filter-title">默认排序</div>
        <div class="filter-title" @click="toggleChannelList">全部频道 ▼</div>
        <div class="channel-list" v-show="showChannelList">
          <button class="channel-btn" v-for="(channel, index) in channels" :key="index" @click="filterByChannel(channel)">{{ channel }}</button>
        </div>
      </div>
    </div>
  </template>

  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const searchKeyword = ref('')
  const showChannelList = ref(false)
  const channels = ref([
    '全部频道', '创意', '励志', '搞笑', '运动',
    '旅行', '爱情', '广告', '动画', '剧情',
    '音乐', '科幻', '纪录', '预告', '混剪',
    '实验', '生活', '时尚', '汽车', '游戏',
    '美食',

  ])

  const toggleChannelList = () => {
    showChannelList.value =!showChannelList.value
  }
  const filterByChannel = (channel) => {
    // 这里可实现根据频道筛选逻辑，简单示例仅打印
    console.log('筛选频道：', channel)
  }
  const goBack = () => {
    router.back()
  }
  </script>

  <style scoped>
  .search-panel {
    background-color: #222;
    color: #fff;
    padding: 10px;
  }
  .search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .search-input {
    flex: 1;
    padding: 6px;
    border: none;
    border-radius: 4px;
    margin-right: 10px;
  }
  .cancel-btn {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
  }
  .filter-section {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
  }
  .filter-title {
    cursor: pointer;
  }
  .channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .channel-btn {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
  }
  </style>
